<template>
  <div>
    <el-row class="work-remind center-input" v-for="(item, index) in value" :key="'remind' + item.id">
      <el-col :span="7">
        <el-form-item :label="'设置提醒' + (index > 0 ? index + 1 : '')">
          <el-select v-model="item.remindtype">
            <el-option v-for="type in remindTypeList" :key="type.id" :label="type.name" :value="type.code.toString()"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="" label-width="5px" >
          <el-input placeholder="数值" v-model="item.value" class="input-with-select" oninput="value=value.replace(/[^\d]/g,'')" v-if="item.remindtype === '1'">
            <el-select v-model="item.unit" slot="append" placeholder="单位">
              <el-option v-for="type in remindUnitTypeList" :key="type.id" :label="type.name" :value="type.code.toString()"></el-option>
            </el-select>
            <!-- <template slot="append">{{ remindUnitTypeList.find((m) => m.code.toString() === item.unit).name }}</template> -->
          </el-input>
          <el-time-picker v-model="item.timeValue" v-else value-format="HH:mm:ss" placeholder="任意时间点"> </el-time-picker>
        </el-form-item>
      </el-col>
      <el-col :span="7" :key="'remind-3' + item.id">
        <el-form-item label="提醒方式">
          <el-radio-group v-model="item.noticetype">
            <el-radio-button v-for="type in noticeTypeList" :key="type.id" :label="type.code.toString()">{{ type.name }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="5" :key="item.id">
        <el-form-item label="" label-width="5px">
          <el-button circle @click="addRemind" type="primary" plain icon="el-icon-plus" size="mini" v-if="index === 0 && value.length < 10"></el-button>
          <el-button circle @click="removeRemind(item.id)" type="danger" plain icon="el-icon-delete" size="mini" v-else-if="index !== 0"></el-button>
          <tl-help v-if="index === 0">
            最多可设置10次提醒，提醒时间设置有两种：<br />
            ● 开始时间提前提醒，据设置的开始时间，提前多少天/小时/分钟进行提醒；<br />
            ● 当天固定时刻提醒，据设置的开始时间，在当天特定时刻进行提醒。
          </tl-help>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryDataCode } from '@tapui/api/dataCode'
export default {
  data() {
    return {
      remindId: -1,
      remindTypeList: [],
      noticeTypeList: [],
      remindUnitTypeList: []
    }
  },
  props: {
    value: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  methods: {
    addRemind() {
      this.value.push({
        id: --this.remindId,
        remindtype: '1',
        noticetype: 'app',
        unit: '1',
        value: 1,
        timeValue: '09:00:00'
      })
    },
    removeRemind(id) {
      this.$tap.confirm('确定要删除？').then((_) => {
        this.value.splice(this.value.findIndex((m) => m.id === id), 1)
      })
    }
  },
  created() {
    queryDataCode({ itemCodes: 'BaseRemindType,BaseNoticeType,BaseRemindUnitType' }).then((res) => {
      this.remindTypeList = res.result.BaseRemindType
      this.noticeTypeList = res.result.BaseNoticeType
      this.remindUnitTypeList = res.result.BaseRemindUnitType
    })
  }
}
</script>

<style scoped lang="scss">
.input-with-select {
  .el-select {
    width: 80px;
  }
}
</style>
